<template>
    <div>
        <el-card shadow="never" class="mt-4">
            <template #header>
            <div class="flex justify-between">
                <span class="text-sm">订单统计</span>
                <div>
                    <el-check-tag v-for="(item,index) in options" :key="index" :checked="current == item.value" style="margin-right: 8px"
                    @click="handleChoose(item.value)">{{item.text}}</el-check-tag>
                </div>
            </div>
            </template>
            <div ref="el" id="chart" style="width: 100%; height: 300px;">
            
            </div>
        </el-card>
        
    </div>
</template>
<!-- setup生命周期在dom之前 -->
<script setup>
import {ref,onMounted,onBeforeUnmount} from 'vue'
import * as echarts from 'echarts';
import { getStatistics3 } from '~/api/index.js'
import {  useResizeObserver } from '@vueuse/core'
const current = ref('week')
const options = [
{
    text:'近一个月',
    value:'month'
},
{
    text:'近一周',
    value:'week'
},
{
    text:'近24小时',
    value:'hour'
},

]
// 鼠标点击下去进行切换
const handleChoose = (type)=>{
    current.value = type
    // 每次点击就可以获取不同数据
    getData()
}

var myChart = null
onMounted(()=>{
    var chartDom = document.getElementById('chart');
    //没有节点就没必要获取相关的接口数据,就不会报错
    if(chartDom){
        myChart = echarts.init(chartDom);
        getData()
    }
    myChart = echarts.init(chartDom);
    
})

//页面被销毁之前,chart对象的释放(打包)
onBeforeUnmount(()=>{
    if(myChart){
        echarts.dispose(myChart)
    }
})
function getData(){
   let option = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]

    };

    myChart.showLoading()
    // option && myChart.setOption(option);
    getStatistics3(current.value)
    .then(res=>{
        option.xAxis.data = res.x
        option.series[0].data = res.y
        // console.log(res);
        myChart.setOption(option)
    })
    .finally(()=>{
        myChart.hideLoading()
    })
  
}

const el = ref(null)
//简写
useResizeObserver(el,(entries)=>myChart.resize())
// useResizeObserver(el,(entries)=>{
//     myChart.resize()
// })
</script>